<template>
  <div class="condittion">
    <header>
      <h1>计算脚本</h1>
    </header>
    <div class="condittion-content">
      <!-- 计算脚本左侧 Start -->
      <div class="content-left">
        <a-form-model ref="ruleForm" :model="calcForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <!-- 是否启用计算项 Start -->
          <a-form-model-item label="启用计算">
            <a-checkbox name="type" v-model="info.isExecute"> </a-checkbox>
          </a-form-model-item>
          <!-- 是否启用计算项 End -->
          <!-- 计算函数项 Start -->
          <a-form-model-item label="计算函数">
            <a-select v-model="info.calculateFunctionID" :disabled="!info.isExecute">
              <a-select-option v-for="computationalItem in computationalFun" :key="computationalItem.DictionaryDataID">
                {{ computationalItem.DictionaryDesc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <!-- 计算函数项 End -->
          <!-- 计算数据项 Start -->
          <a-form-model-item label="计算数据" class="data-list-box">
            <div class="data-list">
              <a-checkbox-group v-model="info.selectedCalculationNumList">
                <a-row>
                  <a-col :span="24" v-for="(item, index) in info.calculationNumList" :key="item.JobItemID">
                    <a-checkbox :value="item.JobItemID" :disabled="!info.isExecute">{{
                      `${index + 1}:【${item.JobItemName}】${item.DataTypeName
                        }`
                    }}</a-checkbox></a-col>
                </a-row>
              </a-checkbox-group>
            </div>
          </a-form-model-item>
          <!-- 计算数据项 End -->
        </a-form-model>
      </div>
      <!-- 计算脚本左侧 End -->
      <div class="content-right">
        <!-- 计算类型 Start-->
        <!-- <div class="top">
          <h1>
            计算类型
            <span class="cursor-pointer" @click="addType"
              ><a-icon type="plus-circle"
            /></span>
          </h1>
          <a-row
            type="flex"
            justify="center"
            :gutter="[16, 0]"
            style="margin-bottom: 0.9375rem"
          >
            <a-col
              v-for="(item, index) in calcBrandList"
              :key="index"
              class="flex-justify-center"
              :span="item.span"
            >
              {{ item.name }}
            </a-col>
          </a-row>
          <div class="top-list">
            <a-row
              class="row-class"
              type="flex"
              justify="center"
              :gutter="[16, 0]"
              v-for="(itm, idx) in info.calculationTypeList"
              :key="idx"
            >
              <a-col class="flex-justify-center" :span="2" :order="1">
                {{ idx + 1 }}
              </a-col>
              <a-col class="flex-justify-center" :span="4" :order="2"
                ><a-select
                  size="small"
                  style="width: 100%"
                  v-model="itm.LogicType"
                  :disabled="!info.isExecute"
                >
                  <a-select-option
                    v-for="logicalItem in logicalType"
                    :key="logicalItem.DictionaryID"
                  >
                    {{ logicalItem.DictionaryDesc }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col class="flex-justify-center" :span="8" :order="3">
                <a-select
                  size="small"
                  style="width: 100%"
                  v-model="itm.CalculateType"
                  :disabled="!info.isExecute"
                >
                  <a-select-option
                    v-for="calculationItem in calculationType"
                    :key="calculationItem.DictionaryID"
                  >
                    {{ calculationItem.DictionaryDesc }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col class="flex-justify-center" :span="8" :order="5">
                <a-input
                  size="small"
                  v-model="itm.CalculateData"
                  :disabled="!info.isExecute"
                />
              </a-col>
              <a-col class="flex-justify-center" :span="2" :order="12">
                <a-icon
                  type="close"
                  class="cursor-pointer"
                  @click="delCalcBrand(itm, idx)"
                />
              </a-col>
            </a-row>
          </div>
        </div> -->
        <!-- 计算类型 End -->

        <!-- 计算结果 Start -->
        <div class="bottom">
          <h1>
            计算结果
            <span class="cursor-pointer" @click="addRes"><a-icon type="plus-circle" /></span>
          </h1>
          <!-- 表头 Start -->
          <a-row type="flex" justify="center" :gutter="[16, 0]" style="margin-bottom: 0.9375rem">
            <a-col v-for="(item, index) in calcResultist" :key="index" class="flex-justify-center" :span="item.span">
              {{ item.name }}
            </a-col>
          </a-row>
          <!-- 表头 End -->
          <!-- 信息 Start -->
          <div class="bottom-list">
            <a-row class="row-class" type="flex" justify="center" :gutter="[14, 0]"
              v-for="(itm, idx) in info.calculationResList" :key="idx">
              <a-col class="flex-justify-center" :span="2" :order="1">
                {{ idx + 1 }}
              </a-col>
              <a-col class="flex-justify-center" :span="4" :order="2"><a-select size="small" style="width: 100%"
                  v-model="itm.CalculateType" :disabled="!info.isExecute">
                  <a-select-option v-for="calculationResItem in calculationResType"
                    :key="calculationResItem.DictionaryDataID">
                    {{ calculationResItem.DictionaryDesc }}
                  </a-select-option>
                </a-select>
              </a-col>
              <a-col class="flex-justify-center" :span="8" :order="3">
                <a-input size="small" v-model="itm.CalculateData" :disabled="!info.isExecute" />
              </a-col>
              <a-col class="flex-justify-center" :span="8" :order="5">
                <a-input size="small" v-model="itm.CalculateResult" :disabled="!info.isExecute" />
              </a-col>
              <a-col class="flex-justify-center" :span="2" :order="12">
                <a-icon type="close" class="cursor-pointer" @click="delCalcResult(itm, idx)" />
              </a-col>
            </a-row>
          </div>
          <!-- 信息 End -->
        </div>
        <!-- 计算结果 End -->
      </div>
    </div>
  </div>
</template>
       
<script>
import { getDictionaryDataSources } from "@/api/PulicBatchRecord"; //数据字典
import { deleteCalExcuteScriptDetail } from "@/api/CalExcuteScriptDetail";
export default {
  props: ["info"],
  data() {
    return {
      calcForm: {}, //计算Form
      labelCol: { span: 4 }, //Form间隔
      wrapperCol: { span: 14 }, //Form间隔
      calcBrandList: [
        { name: "序号", span: 2 },
        { name: "逻辑类型", span: 4 },
        { name: "计算类型", span: 8 },
        { name: "计算数据", span: 8 },
        { name: "操作", span: 2 },
      ], //逻辑类型表头
      calcResultist: [
        { name: "序号", span: 2 },
        { name: "计算类型", span: 4 },
        { name: "计算数据", span: 8 },
        { name: "计算结果", span: 8 },
        { name: "操作", span: 2 },
      ], //计算类型表头
      computationalFun: [], //计算函数
      logicalType: [], //逻辑类型
      calculationType: [], //计算类型
      calculationResType: [], //计算结果-计算类型
      dataSourcesList: [
        {
          name: "计算脚本-计算函数",
          funName: "computationalFun",
        },
        {
          name: "计算类型-逻辑类型",
          funName: "logicalType",
        },
        {
          name: "计算类型-计算类型",
          funName: "calculationType",
        },
        {
          name: "计算结果-计算类型",
          funName: "calculationResType",
        },
      ], //字典遍历查询
    };
  },
  methods: {
    //新增计算结果
    addRes() {
      if (!this.info.isExecute)
        return this.$message.error("请先勾选是否启用计算项再操作");
      this.info.calculationResList.push({
        CalculateType: this.calculationResType[0].DictionaryDataID,
        CalculateData: null,
        CalculateResult: null,
      });
    },
    //新增计算类型
    addType() {
      if (!this.info.isExecute)
        return this.$message.error("请先勾选是否启用计算项再操作");
      this.info.calculationTypeList.push({
        LogicType: this.logicalType[0].DictionaryID,
        CalculateType: this.calculationType[0].DictionaryDataID,
        CalculateData: null,
      });
    },
    //删除计算结果
    delCalcResult(item, index) {
      if (!this.info.isExecute)
        return this.$message.error("请先勾选是否启用计算项再操作");
      let that = this;
      this.$confirm({
        title: "提示",
        content: `是否删除序号【${index + 1}】`,
        async onOk() {
          if (item.ScriptDetailID) {
            let res = await deleteCalExcuteScriptDetail(item);
            res.Success
              ? that.$message.success("删除成功")
              : that.$message.error(res.Message);
            that.info.calculationResList.splice(index, 1);
          } else {
            that.info.calculationResList.splice(index, 1);
            that.$message.success("删除成功");
          }
        },
        onCancel() { },
      });
    },

    //删除计算类型
    delCalcBrand(item, index) {
      if (!this.info.isExecute)
        return this.$message.error("请先勾选是否启用计算项再操作");
      let that = this;
      this.$confirm({
        title: "提示",
        content: `是否删除序号【${index + 1}】`,
        async onOk() {
          if (item.ScriptDetailID) {
            let res = await deleteCalExcuteScriptDetail(item);
            res.Success
              ? that.$message.success("删除成功")
              : that.$message.error(res.Message);
            that.info.calculationTypeList.splice(index, 1);
          } else {
            that.info.calculationTypeList.splice(index, 1);
            that.$message.success("删除成功");
          }
        },
        onCancel() { },
      });
    },
    //获取字段类型
    async getDictionaryDataSourcesFun(description, funListName) {
      let res = await getDictionaryDataSources({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 1000,
        },
        description,
      });
      if (res.Status == 10000) {
        this[funListName] = res.Data.Data;
      }
    },
  },
  mounted() {
    this.dataSourcesList.map((item) => {
      this.getDictionaryDataSourcesFun(item.name, item.funName);
    });
  },
};
</script>
       
<style lang = "less" scoped>
.condittion {
  height: 100%;
}

header {
  margin: 0.9375rem;

  .header-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .Data {
      flex: 1;
      margin: 0 1.25rem;
      display: flex;
      align-items: center;
    }

    .add {
      flex: 2;
    }
  }
}

.condittion-content {
  height: calc(100% - 2rem);
  display: flex;

  .content-left {
    flex: 2;

    .ant-form {
      height: 100%;
    }

    .data-list-box {
      margin: 0 !important;
      height: calc(100% - 8.475rem);

      /deep/ .ant-form-item-control-wrapper {
        height: 100%;

        .ant-form-item-control {
          height: 100%;

          .ant-form-item-children {
            display: inline-block;
            height: 100%;
            width: 100%;
          }
        }
      }

      .data-list {
        height: calc(100% - 0.125rem);
        overflow-y: auto;

        &::-webkit-scrollbar {
          margin: 0.2rem;
          //整体样式
          height: 0.4125rem;
          width: 0.3rem;
        }

        &::-webkit-scrollbar-thumb {
          //滑动滑块条样式
          border-radius: 0.625rem;
          -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
          background: #009a9a;
          // background: rgba(2, 35, 60, 1);
        }

        &::-webkit-scrollbar-track {
          //轨道的样式
          -webkit-box-shadow: 0;
          border-radius: 0.625rem;
          background: #ccc;
        }

        &::-webkit-scrollbar-corner {
          background: red;
        }
      }
    }
  }

  .content-right {
    flex: 5;
    display: flex;
    flex-direction: column;

    .top {
      overflow: hidden;
      flex: 1;
      height: 0;

      .top-list {
        height: calc(100% - 3.2rem);
        overflow: auto;
        overflow-x: hidden;
      }
    }

    .bottom {
      flex: 1;
      height: 0;
      overflow: hidden;

      .bottom-list {
        height: calc(100% - 6rem);
        overflow: auto;
        overflow-x: hidden;
      }
    }
  }
}

.row-class {
  margin-bottom: 0.9375rem;
}
</style>